<template>
  <div class="hView">
    <van-sticky>
      <van-nav-bar title="任务大厅" />
      <van-dropdown-menu active-color="#2F81FE">
        <van-dropdown-item
          @change="change1"
          v-model="value1"
          :options="option1"
        />
        <van-dropdown-item
          @change="change2"
          v-model="value2"
          :options="option2"
        />
      </van-dropdown-menu>
    </van-sticky>
    <div class="list" id="list">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <van-cell v-for="item in Alllists" @click="godetail(item.id)">
            <div class="itemList u-flex-bet" @click="godetail(item.id)">
              <div class="u-flex">
                <van-image
                  width="35"
                  height="35"
                  round
                  :src="item.avatar ? item.avatar : defaults"
                />
                <div class="item">
                  <div class="title1">{{ item.name }}</div>
                  <div class="title2">
                    剩余数量:
                    <span style="color:red">{{ item.accept_num }}</span
                    >/{{ item.num }}
                  </div>
                </div>
              </div>

              <div class="statu u-flex">
                <div class="price">+{{ item.price }}</div>
                <van-image
                  width="36rem"
                  height="36rem"
                  round
                  :src="require('@/assets/images/taskHouse/icon_coin@2x.png')"
                />
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>

      <!-- 			<div class="itemList" @click="godetail()">
				<van-image width="35" height="35" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<div class="item">
					<div class="title1">微信登录领10元</div>
					<div class="title2">剩余数量:9/10</div>
				</div>
				<div class="statu">
					<div>500</div>
					<div>众币</div>
				</div>
			</div> -->
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Image as VanImage } from "vant";
import { PRICE_SCOPE, JOB_GET, JOB_LIST } from "@/api/api.js";
import {
  Tabbar,
  NoticeBar,
  TabbarItem,
  Search,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Tab,
  Tabs,
  PullRefresh,
  List,
  Lazyload,
  Sticky,
} from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Swipe);
Vue.use(Search);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(PullRefresh);
Vue.use(List);
Vue.use(Lazyload);
Vue.use(Sticky);
Vue.use(VanImage);
Vue.use(NoticeBar);
export default {
  name: "taskHouse",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  data() {
    return {
      value1: 0,
      value2: 0,
      option1: [],
      option2: [
        { text: "全部分类", value: "a" },
        { text: "公众号", value: "b" },
        { text: "微信扫码", value: "c" },
        { text: "小程序", value: "d" },
        { text: "分享评论", value: "e" },
        { text: "拼多多", value: "f" },
        { text: "其他", value: "g" },
      ],
      Alllists: [],
      curId: 0,
      // 下拉
      isLoading: true,
      loading: false,
      finished: false,
      time: 0,
      p: "",
      defaults: require("../.././assets/images/avator.png"),
    };
  },
  props: {},
  mounted() {
    this.getPrice();
    this.getKind();
    this.getAllList(0, 0);
  },

  methods: {
    onRefresh() {
      this.getAllList(0, this.value2);
      let that = this;
      setTimeout(() => {
        that.isLoading = false;
        that.finished = false;
        that.loading = false;
      }, 1000);
      that.$nextTick(() => {
        document.querySelector("#list").scrollTop = 0;
      });
    },
    onLoad() {
      this.loading = false;
      if (this.time != 0) {
        let that = this;
        that.LoadList(that.p);
      }
    },
    justifyImgWidth(e) {
      console.log(e.currentTarget.clientWidth);
      this.Imgheight = e.currentTarget.clientWidth;
      // this.logoWidth = e.currentTarget.clientHeight * 2.75
    },
    async getPrice() {
      const { data } = await this.$reqGet(PRICE_SCOPE, {});
      if (data.status == 1) {
        let list = data.data;
        let options = [
          {
            text: "赏金级别",
            value: "0",
          },
        ];
        for (let i = 0; i < list.length; i++) {
          options.push({
            text: list[i],
            value: list[i],
          });
        }
        console.log(options);
        this.option1 = options;
        this.value1 = options[0].value;
      }
    },
    async getKind() {
      const { data } = await this.$reqGet(JOB_GET, {});
      if (data.status == 1) {
        let list = JSON.parse(JSON.stringify(data.data));
        let arr = [{ value: 0, text: "全部" }];
        for (let i = 0; i < list.length; i++) {
          for (let j = 0; j < list[i].sublist.length; j++) {
            arr.push({
              value: list[i].sublist[j]["id"],
              text: list[i].sublist[j]["name"],
            });
          }
        }
        let a = JSON.parse(JSON.stringify(arr));
        this.value2 = a[0].value;
        this.option2 = a;
      }
    },
    async getAllList(val1, val2) {
      const { data } = await this.$reqGet(JOB_LIST, {
        category: val2,
        scope: val1,
      });
      if (data.status == 1) {
        let list = data.data.list;
        let p = data.data.nextPage.value;
        this.p = p;
        this.Alllists = list;
        this.time = 1;
        this.loading = false;
        this.finished = false;
      }
    },
    async LoadList(p) {
      this.loading = true;
      if (p) {
        const { data } = await this.$reqGet(JOB_LIST, {
          category: this.curId,
          p: p,
        });
        if (data.status == 1) {
          let list = data.data.list;
          let p = data.data.nextPage.value ? data.data.nextPage.value : false;
          this.p = p;
          this.Alllists = this.Alllists.concat(list);
          this.loading = false;
        }
      } else {
        this.finished = true;
      }
    },
    change1(param) {
      this.value1 = param;
      this.getAllList(param, this.value2);
    },
    change2(param) {
      this.value2 = param;
      this.getAllList(this.value1, param);
    },
    godetail(id) {
      let data = {
        id: id,
        type: "jd",
      };
      this.$router.push({ name: "taskDetail", query: data }).catch((err) => {
        // console.log("输出报错", err);
      });
    },
    // 选择分类
    // chooseKind(e) {
    // 	if (e == '3') {
    // 		this.$router.push({ name: 'areaSeckill' });
    // 	}
    // }
  },
};
</script>
<style scoped lang="scss">
.hView {
  background-color: #f5f5f5;

  .van-nav-bar {
    background-color: var(--theme);

    /deep/ .van-nav-bar__title {
      color: #fff;
      font-size: 36rem;
      font-weight: bold;
    }
  }
  /deep/ .van-ellipsis {
    color: #343434;
    font-size: 28rem;
  }

  .list {
    padding: 24rem 24rem 166rem;

    .van-cell {
      border-radius: 20rem;
      margin-bottom: 24rem;

      .item {
        margin-left: 34rem;

        .title1 {
          font-weight: bold;
          font-size: 32rem;
        }

        .title2 {
          font-size: 28rem;
          color: #999;
        }
      }

      .statu {
        .price {
          color: #ff4343;
          font-size: 36rem;
          font-weight: bold;
          margin-right: 12rem;
        }
      }
    }
  }
}
</style>
